---
title: vertical menu
---
<link href="css/mm-vertical.css" rel="stylesheet" type="text/css"/>
<div class="container">
   <div class="row">
     <aside class="col-md-3">
       <nav class="sidebar-nav">
         {{> menu id="1"}}
       </nav>
     </aside>
     <div class="col-md-9">
       <h3>Auto Collapse
         <small>default</small>
       </h3>
       <div class="panel panel-default">
         <div class="panel-heading">
           Code
           <span class="pull-right">
             <span class="fa fa-code"></span>
           </span>
         </div>
         <div class="panel-body">
{{#markdown}}
 ```html
 <script>
   $(function () {

       $('#menu1').metisMenu();

   });
 </script>
 ```
{{/markdown}}
          <p>
            <br>
            <a class="btn btn-info btn-lg" href="css/mm-vertical.css" target="_top">Download CSS File</a>
          </p>
         </div>
       </div>
     </div>
   </div>
 </div>

 <hr>

    <div class="container">
      <div class="row">
        <div class="col-md-3">
          <nav class="sidebar-nav">
            {{> menu id="2"}}
          </nav>
        </div>
        <div class="col-md-9">
          <h3>No Collapse</h3>
          <div class="panel panel-default">
            <div class="panel-heading">
              Code
              <span class="pull-right">
                <span class="fa fa-code"></span>
              </span>
            </div>
            <div class="panel-body">
{{#markdown}}
 ```html
 <script>
   $(function () {

       $('#menu2').metisMenu({ toggle: false });

   });
 </script>
 ```
{{/markdown}}

            </div>
          </div>
        </div>
      </div>
    </div>

    <hr>

    <div class="container" dir="rtl">
      <div class="row ">
        <div class="col-md-9">
          <h3 id="rtlh3">RTL SUPPORT <small>RTL</small></h3>
          <div class="panel panel-default">
            <div class="panel-heading">
              Code
              <span class="pull-right">
                <span class="fa fa-code"></span>
              </span>
            </div>
            <div class="panel-body" dir="ltr">
{{#markdown}}
 ```html
 <body dir="rtl">
...
 <script>
   $(function () {

       $('#menu3').metisMenu();

   });
 </script>
 ```
{{/markdown}}


            </div>
          </div>
        </div>

        <div class="col-md-3">
          <nav class="sidebar-nav">
            {{> menu id="3"}}
          </nav>
        </div>
      </div>
    </div>




 <script>
   $(function () {

       $('#menu1').metisMenu();

       $('#menu2').metisMenu({
           toggle: false
       });

       $('#menu3').metisMenu();

   });
 </script>
